<template>
  <section>
    <div v-if="item.cell" class="info-box" v-for="(item, index) in list" :key="JSON.stringify(index)" @click="doSomething">
      <div>
        <p>{{ item.name }}</p>
        <p><span>{{ item.number }}</span> <a>{{ item.cell }}</a></p>
      </div>
      <img :src="item.icon">
    </div>
    <div v-if="!item.cell" class="info-box" v-for="(item, index) in list" :key="JSON.stringify(index)" style="padding-bottom: 0.3rem;">
      <div style="margin-top: 0.25rem;">
        {{ item.name }}
      </div>
      <img :src="item.icon">
    </div>
  </section>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: "InfoItem",
    props: {
      list: {
        type: Array,
        default: function () {
          return [{
            name: '我的佣金',
            number: 1000.65,
            cell: '元'
          },
            {
              name: '佣金明细',
              number: 100,
              cell: '笔'
            }]
        }
      }
    },
    methods: {
      doSomething () {
        Toast({
          message: '正在开发中...',
          duration: 1000
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  section{
    margin-top: 0.2rem;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0rem 0.3rem 0rem;
    display: flex;
    color: #333;
    .info-box{
      flex-grow: 1;
      div{
        float: left;
        margin-left: 0.4rem;
      }
      img{
        display: block;
        width: auto;
        max-width: 0.5rem;
        /*height: 0.48rem;*/
        float: right;
        margin-right: 0.6rem;
        margin-top: 0.25rem;
      }
      p{
        &:first-child{
          margin-bottom: 0.1rem;
        }
        span{
          color: #FD6100;
        }
        a{
          color: #666;
        }
      }
    }
    position: relative;
    &:after{
      content: '';
      width: 1px;
      height: 1.2rem;
      position: absolute;
      background: #eee;
      left: 51%;
    }
  }
</style>
